<template>
    <div class="orderDetail page">
        <formHeader :title="'订单详情'"></formHeader>
        <div class="con">
            <div class="top">
                <div class="state">
                    <span v-if="order" class="stateName">支付状态:{{orderPayStatusOptions[order.mallOrder.payStatus]}}</span>
                    <span v-if="order">订单状态:{{orderStatusOptions[order.mallOrder.orderStatus]}}</span>
                </div>
                <div class="info">
                    <div class="infoCell" v-if="order.mallOrder.orderType ==0&&order.mallOrder.logNo">
                        <div><img src="./car.png" alt=""></div>
                        <div class="word">
                            <div class="sit">单号 {{order.mallOrder.logNo}}</div>
                            <div class="time" @click="clips" :data-clipboard-text="order.mallOrder.logNo">点击复制单号</div>
                        </div>
                    </div>
                    <div class="infoCell" v-if="order.mallOrder.orderType ==0&&!order.mallOrder.mention">
                        <div><img src="./size.png" alt=""></div>
                        <div class="word" @click="copyArea" :data-clipboard-text="order.mallOrder.userName+' '+order.mallOrder.address+' '+order.mallOrder.mobile">
                            <div class="title">
                                <span class="name">{{order.mallOrder.userName}}</span>
                                <span class="mobile">{{order.mallOrder.mobile}}</span>
                            </div>
                            <div class="area">
                                {{order.mallOrder.address}}
                            </div>
                        </div>
                    </div>
                    <div class="infoCell" v-if="order.mallOrder.mention">
                        <div><img src="./size.png" alt=""></div>
                        <div class="word" @click="copyArea" :data-clipboard-text="order.shopEntity.name+' '+order.shopEntity.province+order.shopEntity.city+order.shopEntity.area+order.shopEntity.shopAddress+' '+order.shopEntity.shopPhone">
                            <div class="title">
                                <span class="name">提货店名:{{order.shopEntity.name}}</span>
                                <span class="mobile">{{order.shopEntity.shopPhone}}</span>
                            </div>
                            <div class="area">
                                {{order.shopEntity.province+order.shopEntity.city+order.shopEntity.area+order.shopEntity.shopAddress}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="goodsList">
                <div class="title">
                    <div><img src="./shop.png" alt=""></div>
                    <div>{{order.shopEntity?order.shopEntity.name:'社集优选旗舰店'}}></div>
                </div>
                <div class="goodsItem" v-for="(item,index) in order.mallOrder.items" :key="index">
                    <div><img :src="imgH+item.img" alt=""></div>
                    <div class="word">
                        <div class="left">
                            <div class="goodName" v-if="item.name">{{item.name}}</div>
                            <div class="type"> {{item.skuName?item.skuName:'默认'}}</div>
                        </div>
                        <div class="right">
                            <div class="goodName" v-if="item.price">¥{{item.price.toFixed(2)}}</div>
                            <div class="type">X{{item.quantity}}</div>
                            <div
                                    v-if="order.mallOrder.orderStatus==7&&order.mallOrder.payStatus==1&&order.mallOrder.busType==0&&order.mallOrder.orderType==0"
                                    class="appraise"
                                    @click="appraise(item.goodsId,item.id,item.status)">{{item.status?'已评论':'评论'}}</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="money">
                <div class="left">
                    <div>商品总价</div>
                    <div>运费</div>
                    <div>优惠券抵扣</div>
                    <div>换购券抵扣</div>
                    <div>清货券抵扣</div>
                    <div class="last">实付款</div>
                </div>
                <div class="right">
                    <div>￥ {{order.mallOrder.price?order.mallOrder.price.toFixed(2):'0.00'}}</div>
                    <div>￥ {{order.mallOrder.logFee?order.mallOrder.logFee.toFixed(2):'0.00'}}</div>
                    <div>￥ {{order.mallOrder.coupon?order.mallOrder.coupon.toFixed(2):'0.00'}}</div>
                    <div>￥ {{order.mallOrder.voucher?order.mallOrder.voucher.toFixed(2):'0.00'}}</div>
                    <div>￥ {{order.mallOrder.clear?order.mallOrder.clear.toFixed(2):'0.00'}}</div>
                    <div class="last">￥
                        {{(order.mallOrder.price+order.mallOrder.logFee-order.mallOrder.coupon-order.mallOrder.voucher-order.mallOrder.clear).toFixed(2)}}
                    </div>
                </div>
            </div>
            <div class="msg">
                <div class="title">订单信息</div>
                <div class="content">
                    <div class="left">
                        <div>订单编号:</div>
                        <div>转出方:</div>
                        <div>接收方:</div>
                        <div>创建时间:</div>
                        <div>付款时间:</div>
                        <div>发货时间:</div>
                        <div>备注:</div>
                        <!--                        <div>成交时间:</div>-->
                    </div>
                    <div class="right">
                        <div class="time1" @click="clip" :data-clipboard-text="order.mallOrder.orderNo">
                            {{order.mallOrder.orderNo}}
                        </div>
                        <div>{{this.order.fromUser.name}}</div>
                        <div>{{this.order.user.name}}</div>
                        <div>{{parseTime(order.mallOrder.orderTime)}}</div>
                        <div>{{parseTime(order.mallOrder.payTime)}}</div>
                        <div>{{parseTime(order.mallOrder.deliverTime)}}</div>
                        <div>{{this.order.mallOrder.remark}}</div>
                        <!--                        <div>asfsafasfsafsafsaf</div>-->
                    </div>
                </div>
            </div>
            <div class="btn">
                <div class="btnItem"
                     v-if="order.mallOrder.orderType==0&&order.mallOrder.payStatus==1 && order.mallOrder.orderStatus==0&&ways==1 && order.mallOrder.mention == 0 "
                     @click="uploadOrder">上传物流单号</div>

                <div class="btnItem" v-if="order.mallOrder.cancel" @click="removeOrder(order.mallOrder.id)">取消订单</div>

                <div class="btnItem" v-if="order.mallOrder.payStatus==0 && order.mallOrder.orderStatus!=8&&!ways" @click="unionOrder">立即支付</div>
            </div>
        </div>
    </div>
</template>

<script>
    import formHeader from '@/components/form-header'
    import {getOrder, unionPay,uploadLogNo,upLoadAppraise} from "../../api/order"
    import {parseTime} from "@/common/js/time";
    import {config} from "@/util/wx";
    import Wx from '@/wx'
    import {removeOrder,removeShopOrder} from "@/api/order";
    import * as Dialog from '@/dialog'
    import {mapState} from 'vuex'
    import ClipboardJS from 'clipboard'
    import {showInfo,showError} from "@/toast"

    export default {
        name: "orderDetail",
        components: {formHeader},
        activated() {
            // if (this.$route.query.id) {
            this.getOrder()
            //微信配置
            config()
            // }


        },
        mounted() {

        },
        computed: {
            ...mapState({
                userId: state => state.user.user.userId
            }),
            retailPrice() {
                let price = this.order.mallOrder.price
                if (this.order.mallOrder.logFee != null) {
                    price = price + this.order.mallOrder.logFee
                }
                if (this.order.mallOrder.coupon != null) {
                    price = price - this.order.mallOrder.coupon
                }
                return price
            },
            ways(){
                return this.$route.query.ways
            }
        },
        data() {
            return {
                payConfig: null,
                log: {
                    location: "长沙转运中心公司 已发出，下一站 衡阳转运中心",
                    time: "2019-09-20  16：39：18"
                },
                order: {
                    fromUser: Object,
                    mallOrder: Object,
                    user: Object,
                },
                orderStatusOptions: ["新订单", "配货中", "已发货", "已收货", "退款中", "已退款", "已拒绝", "已完成", "已取消"],
                orderPayStatusOptions: ["未支付", "已支付"],
                orderTypeStatusOptions: ["发货", "转货"],
                flag: true,
                imgH: process.env.VUE_APP_IMG_DOMAIN,
                skipFlag:true,
                upload:{
                    orderId:null,
                    logNo:null,
                    logCompany:null,
                    logFee:null
                }
            }
        },
        methods: {
            clip() {
                var clipboard = new ClipboardJS('.time1')
                clipboard.on('success', e => {

                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })

            },
            clips() {
                var clipboard = new ClipboardJS('.time');
                clipboard.on('success', function (e) {
                    console.info('Action:', e.action);
                    console.info('Text:', e.text);
                    console.info('Trigger:', e.trigger);
                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })
            },
            copyArea(){
                var clipboard = new ClipboardJS('.word')
                clipboard.on('success', e => {

                    e.clearSelection()
                    Dialog.showCorrect("复制成功!")
                })
            },
            removeOrder(id) {
                if (this.flag == false) {
                    showError('请勿重复点击')
                    return
                }
                this.$createDialog({
                    type: 'confirm',
                    icon: 'cubeic-alert',
                    title: '请确认是否取消订单',
                    confirmBtn: {
                        text: '确定',
                        active: true,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    cancelBtn: {
                        text: '取消',
                        active: false,
                        disabled: false,
                        href: 'javascript:;'
                    },
                    onConfirm: () => {
                        this.flag = false
                        // Dialog.showCorrect("暂时关闭,11月22日开放!")
                        if (this.ways){
                            removeShopOrder(id).then(res => {
                                Dialog.showCorrect("取消成功!")
                                this.$router.back()
                                this.flag = true
                            })
                        }else {
                            removeOrder(id).then(res => {
                                Dialog.showCorrect("取消成功!")
                                this.$router.back()
                                this.flag = true
                            })
                        }

                    }, onCancel: () => {
                        this.$createToast({
                            type: 'warn',
                            time: 1000,
                            txt: '取消订单'
                        }).show()
                    }
                }).show()
                setTimeout(()=>{
                    this.flag=true
                },5000)
            },
            getOrder() {
                getOrder(this.$route.query.id, null).then(res => {
                    this.order = res.data
                    this.upload.logFee = this.order.mallOrder.logFee
                    this.upload.orderId = this.order.mallOrder.id
                    // console.log(this.order)
                })
            },
            parseTime(time) {
                return parseTime(time)
            },
            unionOrder() {
                if(!this.skipFlag){
                    showError('请勿重复点击')
                    return;
                }
                this.skipFlag = false
                if (this.payConfig) {
                    this.wxPay()
                } else {
                    unionPay(this.order.mallOrder.orderNo).then(res => {
                        this.payConfig = res.data
                        this.wxPay()
                    })
                }
                setTimeout(()=>{
                    this.skipFlag =true
                },5000)
            },
            wxPay() {
                Wx.pay(this.payConfig).then(res => {
                    // Dialog.showCorrect("操作成功")
                    if (res.data == "ok") {
                        this.getOrder()
                    }

                })
            },
            uploadOrder(){
                this.dialog = this.$createDialog({
                        type: 'confirm',
                        title: '',
                        onConfirm: (e, promptValue) => {
                            // console.log(this.upload)
                            if (!this.upload.logCompany||!this.upload.logNo){
                                showError('请完善信息')
                                return
                            }
                            uploadLogNo(this.upload.orderId,this.upload.logNo,this.upload.logCompany,this.upload.logFee).then(res=>{
                                // console.log(res)
                            })
                        },
                    },
                    (createElement) => {
                        let self = this
                        return [
                            createElement('div',{
                                slot:'title',
                                style:{
                                    marginTop:'10px'
                                }
                            },'上传物流信息'),
                            createElement('div', {
                                'class': {
                                    'inputBox': true
                                },
                                style: {
                                    padding:'5px',
                                    fontSize: '18px',
                                    display:'flex',
                                    whiteSpace:'nowrap'
                                },
                                slot:'content'
                            }, [
                                createElement('span', {
                                    'class': {
                                        'title': true
                                    },
                                    style:{
                                        marginRight:'2px',
                                        whiteSpace:'nowrap'
                                    }
                                },'物流公司:'),
                                createElement('input', {
                                    'class': {
                                        'input': true
                                    },
                                    domProps: {
                                        value: self.upload.logCompany,
                                        type: "text"
                                    },
                                    on: {
                                        input: function (event) {
                                            self.upload.logCompany = event.target.value
                                        }
                                    }
                                }),
                            ]),
                            createElement('div', {
                                'class': {
                                    'inputBox': true
                                },
                                slot:'content',
                                style: {
                                    padding:'5px',
                                    fontSize: '18px',
                                    display:'flex',
                                    whiteSpace:'nowrap'
                                },
                            }, [
                                createElement('span', {
                                    'class': {
                                        'title': true
                                    },
                                    style:{
                                        marginRight:'2px',
                                        whiteSpace:'nowrap'
                                    }
                                },'物流单号:'),
                                createElement('input', {
                                    'class': {
                                        'input': true
                                    },
                                    domProps: {
                                        value: self.upload.logNo,
                                        type: "text"
                                    },
                                    on: {
                                        input: function (event) {
                                            self.upload.logNo = event.target.value
                                        }
                                    }

                                }),
                            ]),
                            // createElement('div', {
                            //     'class': {
                            //         'inputBox': true
                            //     },
                            //     slot:'content',
                            //     style: {
                            //         padding:'5px',
                            //         fontSize: '18px',
                            //         display:'flex'
                            //     },
                            // }, [
                            //     createElement('span', {
                            //         'class': {
                            //             'title': true
                            //         },
                            //         style:{
                            //             marginRight:'2px'
                            //         }
                            //     },'物流费:'),
                            //     createElement('input', {
                            //         'class': {
                            //             'input': true
                            //         },
                            //         domProps: {
                            //             value: self.upload.logFee,
                            //             type: "number"
                            //         },
                            //         on: {
                            //             input: function (event) {
                            //                 // self.$emit('input', event.target.value)
                            //                 self.upload.logFee = event.target.value
                            //             }
                            //         }
                            //
                            //     }),
                            // ])

                        ]
                    }
                ).show()
            },
            appraise(goodsId,id,status){
                if (status==1){return}
                this.appraiseDialog = this.$createDialog({
                    type: 'prompt',
                    title: '评价商品',
                    prompt: {
                        value: '',
                        placeholder: '请输入商品评价'
                    },
                    onConfirm: (e, promptValue) => {
                        if (promptValue==''){
                            showError('评价不能为空')
                        }else {
                            upLoadAppraise(goodsId, id, promptValue).then(res=>{
                                showError('评价成功')
                                this.order.mallOrder.items.forEach(item=>{
                                    if (item.id==id){
                                        item.status=1
                                    }
                                })
                            })
                        }

                    }
                })
                this.appraiseDialog.show()
            }
        }
    }
</script>

<style scoped lang="stylus">
    .orderDetail
        background-color #f0f5f5

        .con
            margin-top 47px

            .top
                .state
                    /*height 90px*/
                    background-color #00D6C0
                    color #fff
                    font-size 11px
                    padding-left 25px
                    padding-top 22px
                    padding-bottom 10px
                    span
                        margin-right 10px

                    .stateName
                        margin-bottom 23px
                        font-size 14px

                .info
                    .infoCell
                        padding 15px
                        background-color: #fff
                        display flex
                        align-items center
                        border-bottom 1px solid #eee

                        img
                            width: 30px
                            height: 30px

                        .word
                            margin-left 8px

                            .sit
                                color #00D6C0
                                font-size 12px
                                text-overflow -o-ellipsis-lastline
                                overflow hidden
                                text-overflow ellipsis
                                display -webkit-box
                                -webkit-line-clamp: 2
                                line-clamp 2
                                -webkit-box-orient vertical

                            .time
                                margin-top 9px
                                color #999999
                                font-size 11px

                            .title
                                font-size 12px

                                .name
                                    color #333

                                .mobile
                                    color #999
                                    margin-left 5px

                            .area
                                font-size 12px
                                margin-top 10px
                                color #333
                                text-overflow -o-ellipsis-lastline
                                overflow hidden
                                text-overflow ellipsis
                                display -webkit-box
                                -webkit-line-clamp: 2
                                line-clamp 2
                                -webkit-box-orient vertical

            .goodsList
                margin-top 10px
                padding 15px
                background-color: #fff
                .appraise
                    margin-top 15px
                    color #00A390
                    font-size 13px
                    padding 6px 8px
                    border 1px solid #00A390
                    border-radius 12px

                .title
                    font-size 13px
                    color #333
                    display flex
                    align-items center

                    img
                        width: 15px
                        height: 15px
                        margin-right 7px

                .goodsItem
                    margin-top 18px
                    display flex

                    img
                        width: 82px
                        height: 82px
                        border-radius 5px
                    .word
                        flex 1
                        margin-left 10px
                        display flex
                        justify-content space-between

                        .left
                            flex 1

                        .right
                            text-align right

                        .goodName
                            color #333
                            font-size 12px

                        .type
                            color #666
                            font-size 11px
                            margin-top 15px

            .money
                background-color: #fff;
                padding 15px
                margin-top 10px
                display flex
                justify-content space-between
                font-size 11px
                color #666
                .left,.right
                    div
                        margin-top 4px

                .last
                    font-size 13px
                    margin-top 13px!important

                .right
                    text-align right

                    .last
                        color #00D6C0

            .msg
                padding 15px
                margin-top 10px
                background-color: #fff
                color #333

                .title
                    font-size 15px

                .content
                    margin-top 5px
                    display flex
                    font-size 12px

                    .left, .right
                        div
                            margin-top 10px

                    .right
                        margin-left 48px

            .btn
                padding 15px
                background-color: #fff;
                display flex
                justify-content flex-end
                align-items center

                .btnItem
                    margin-left 5px
                    color #999
                    font-size 13px
                    padding 6px 8px
                    border 1px solid #999
                    border-radius 12px


</style>
